<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>考试页面</title>

    <!--    导入easyui样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
    <!--    导入easyui相关的js库-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <%--导入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layer/layer/layer.js"></script>
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js" charset="utf-8"></script>

    <style type="text/css">
        *{
            position: relative;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //定义变量接收考试状态编号
            var conditionId;
            //定义变量获取日期和时间
            var date,time;
            $.ajax({
                type:"POST",
                url:"../ExamsPageServlet",
                data:"method=showState",
                success:function(data){
                    //反序列化数据
                    data=$.parseJSON(data);
                    conditionId=data.conditionId;
                    $("#courseName").text(data.courseName);
                    $("#className").text(data.className);
                    $("#examDate").text(data.examDate);
                    $("#time").text(data.beginTime+"-"+data.finishTime);
                    date=data.examDate;
                    time=data.beginTime;
                }
            });
            $("#begin").click(function () {
                //获取当前日期
                var myDate=new Date();
                //获取当前年份
                var year=myDate.getFullYear();
                //获取当前月份
                var mouth=myDate.getMonth()+1;
                //获得月中天数
                var day=myDate.getDate();
                //拿到时间数组
                var arr=date.split("-");
                if (year==parseInt(arr[0]) && mouth==parseInt(arr[1]) && day==parseInt(arr[2])){
                    var arrs=time.split(":");
                    //获得考试时间
                    var oldSecond=(parseInt(arrs[0])*60*60)+(parseInt(arrs[1])*60);
                    var h=myDate.getHours();
                    var m=myDate.getMinutes();
                    //获得当前时间
                    var newSecond=(parseInt(h)*60*60)+(parseInt(m)*60);
                    if (newSecond>oldSecond){//要求考试当前时间一定要大于考试考试时间才可以进入考场
                        //更改学员状态表的代考为在考
                        $.post("../ExamsPageServlet","method=updateState&conditionId="+conditionId,function(date){});
                        //提示学员进入考试
                        layer.msg('现在开始考试', {icon: 1});
                        //导入到考试页面
                        top.location.href="ForeExams.jsp";
                    }else{
                        layer.msg("请在考试时间内进入考试");
                    }
                }else{
                    layer.msg("未到考试日期");
                }
            });
        });
    </script>
</head>
<body>
<div style="width: 100%;height: 580px;">
    <!--大按钮层-->
    <div style="margin-left: 5%;width: 30%;height: 60%;background: #B7D2FF;position: relative;top: 20%;border-radius: 10%;" id="begin" >
        <!--开始考试层-->
        <div style="position: relative;top: 20%;width: 70%;height: 20%;left: 17%;border-bottom: 1px solid gray;">
            <!--字体层-->
            <div style="font-family: '楷体';font-size: 30px;position: relative;left: 15%;">
                点击开始考试
            </div>
        </div>
        <!--显示日期时间层-->
        <div style="width: 80%;height: 40%;position: relative;top: 30%;left: 20%;font-size: 20px;font-family: '楷体';">
					<span>
						科目:
						<span id="courseName"></span>
					</span>
            <br />
            <span style="position: relative;top: 8px;">
						应考班级:
						<span id="className"></span>
					</span>
            <br />
            <span style="position: relative;top: 16px;">
						日期:
						<span id="examDate"></span>
					</span>
            <br />
            <span style="position: relative;top: 24px;">
						考试时间:
						<span id="time"></span>
					</span>

        </div>
    </div>
    <div style="width: 65%;height: 75%;position: relative;bottom: 50%;left: 35%;">
        <div style="width: 90%;height: 20%;left: 5%;border-bottom: 2px solid  #0000FF;">
					<span style="font-family: '楷体';font-size: 27px;left: 40%;">
						考生须知
					</span>
        </div>
        <!--考试须知层-->
        <div style="width: 90%;height: 60%;left: 5%;top: 10%;">
            <div style="width: 50%;height: 100%;float: left;background: lightgray;border-radius: 10%;">
						<span style="font-family: '楷体';top: 12px;font-size: 22px;">
							提示:  请在考试开始后五分钟内进入考试，学生进入课程考试界面后网页不可以退出，
							如果强制退出，则系统将自动交卷。当考试时间达到规定时间时，如果考生还未提交试卷，
							系统将自动交卷，以保证考试严肃、公正地进行。
							<br />
							如果考试过程中出现异常（电脑异常，网络异常）等导致本次考试结束，可以由后台教员进行修改考生状态。
						</span>
            </div>
            <div style="width: 5%;height: 100%;float: left;border-right: 1px dashed #1E9FFF;">

            </div>
            <div style="width: 40%;height: 100%;float: right;background: lightgray;border-radius: 10%;">
                <div style="width: 30%;height: 15%;left: 35%;">
							<span style="font-family: '楷体';font-size: 22px;">
								小贴士
							</span>
                </div>
                <div style="width: 100%;height: 80%;top: 5%;font-family: '楷体';font-size: 22px;">
                    一、请检查客户端主机电源是否接通<br />
                    二、请检查网络连接是否正常，如信号偏弱，及时更换网络<br />
                    三、现在可以进入考试了，祝您考出理想成绩
                </div>
            </div>
            <!--<span >

            </span>-->
        </div>
    </div>
</div>
</body>
</html>
